<template>
  <!-- footer -->
  <div class="home-footer" v-if="!piniaSystem.getIsH5">
    <div class="home-footer-wrap">
      <div class="home-footer-top">
        <nav class="home-footer-nav">
          <ul>
            <li class="home-footer-title">{{ t('home.Casino') }}</li>
            <li v-for="item in footer.casino" :key="item.link" @click="goGamePage(item.link)">{{ item.title }}</li>
          </ul>
          <ul>
            <li class="home-footer-title">{{ t('home.Sport') }}</li>
            <li v-for="item in footer.sports" :key="item.link" @click="item.sport ? handleSports(item.link) : goHelp(item.link)">{{ item.title }}</li>
          </ul>
          <ul>
            <li class="home-footer-title">{{ t('home.promo') }}</li>
            <li v-for="item in footer.promo" :key="item.link" @click="goPage(item.link)">{{ item.title }}</li>
          </ul>
          <ul>
            <li class="home-footer-title">{{ t('gameTips.Help') }}</li>
            <li v-for="item in footer.help" :key="item.link" @click="goHelp(item.link)">{{ item.title }}</li>
          </ul>
        </nav>
        <div class="home-footer-identifying">
          <img :src="images.footer1" />
          <img :src="images.footer2" />
          <img src="" />
          <div id="apg-2165bb27-a746-416b-adf1-d453a822ef86" data-apg-seal-id="2165bb27-a746-416b-adf1-d453a822ef86" data-apg-image-size="256" data-apg-image-type="basic-light-large"></div>
        </div>
      </div>
      <div class="home-footer-list">
        <h3>{{t('bottom.bottom_01')}}</h3>
        <ul>
          <li v-for="item in footerGames" :key="item.id">
            <img v-zlazy="item.resource" alt="">
          </li>
        </ul>
      </div>
      <div class="home-footer-list">
        <h3>{{t('bottom.bottom_02')}}</h3>
        <ul>
          <li v-for="item in footerPays" :key="item.id">
            <img v-zlazy="item.resource" alt="">
          </li>
        </ul>
      </div>
      <div class="system-main-footer">
        <span>copyright ©  Mini.Bet 2023 All rights reserved.</span>
        <span>Mini.Bet is operated by Bridge Technologies B.V., with the registration number of 160264 and the registered office address of Dr. M.J. Hugenholtzweg 25, Cura ç ao. It is licensed and authorized by the government of Cura ç ao. The main license is # 8048/JAZ 2022 - 024 Operations issued to Antillephone N.V. The payment agent is Bridge Technologies (Cyrus) Limited, with the registered address of 47 Strovolos Avenue, 5th floor, Curista, Strovolos 2018, Nicosia, Cyprus, Registration No. HE 440867</span>
      </div>
    </div>
  </div>
  <!-- footer -->
  <div class="home-footer-h5" v-else>
    <div class="home-footer-identifying">
      <img :src="images.footer1" />
      <img :src="images.footer2" />
      <img src="" />
    </div>
    <div class="home-footer-list">
      <h3>{{t('bottom.bottom_01')}}</h3>
      <ul>
        <li v-for="item in footerGames" :key="item.id">
          <img v-zlazy="item.resource" alt="">
        </li>
      </ul>
    </div>
    <div class="home-footer-list">
      <h3>{{t('bottom.bottom_02')}}</h3>
      <ul>
        <li v-for="item in footerPays" :key="item.id">
          <img v-zlazy="item.resource" alt="">
        </li>
      </ul>
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item :title="t('home.Casino')" name="1">
        <div class="linker-footer" v-for="item in footer.casino" :key="item.link" @click="goGamePage(item.link)">{{ item.title }}</div>
        <div class="linker-footer" v-for="item in footer.sportsH5" :key="item.link" @click="item.sport ? handleSports(item.link) : goHelp(item.link)">{{ item.title }}</div>
      </van-collapse-item>
      <van-collapse-item :title="t('home.promo')" name="2">
        <div class="linker-footer" v-for="item in footer.promo" :key="item.link" @click="goPage(item.link)">{{ item.title }}</div>
      </van-collapse-item>
      <van-collapse-item :title="t('gameTips.Help')" name="3">
        <div class="linker-footer" v-for="(item, index) in footer.help" :key="item.link" @click="goHelp(item.link, index)">{{ item.title }}</div>
      </van-collapse-item>
    </van-collapse>
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    v-model:autoHeight="dialogConfig.autoHeight"
    :width="dialogConfig.width"
    :headerFixed="dialogConfig.headerFixed"
    :hiddenTitle="dialogConfig.hiddenTitle"
  >
    <HelpH5 v-if="dialogConfig.show" v-model:title="dialogConfig.title" :tabActive="helpH5TabActive" @back="goBack"/>
  </Dialog>
</template>

<script lang="ts" setup name="FooterBar">
import nocache from '@/store/nocache';
import system from '@/store/system';
import userinfo from '@/store/userinfo';
import homeApi from '@/api/modules/home';

const route = useRoute();
const router = useRouter();
const { t } = useI18n();
const piniaSystem = system();
const piniaUserinfo = userinfo();
const piniaNocache = nocache();

const images = reactive({
  footer1: new URL(`../../assets/images/home/footer/footer1.svg`, import.meta.url).href,
  footer2: new URL(`../../assets/images/home/footer/footer2.svg`, import.meta.url).href,
})

const data:any = reactive({
  activeNames: [],
  footer: {
    casino: [
      {
        title: computed(()=>t('home.Originals')),
        link: 'OriginalGame',
      },
      {
        title: computed(()=>t('home.Slots')),
        link: 'SlotGame',
      },
      {
        title: computed(()=>t('home.title4')),
        link: 'DeskGame',
      },
      {
        title: computed(()=>t('home.title5')),
        link: 'LiveGame',
      },
    ],
    sportsH5:[
      {
        title: computed(()=>t('home.title6')),
        link: '',
        sport: true
      },
    ],
    sports: [
      {
        title: computed(()=>t('sportMenu.Home')),
        link: '',
        sport: true
      },
      {
        title: computed(()=>t('sportMenu.Live')),
        link: 'live',
        sport: true
      },
      {
        title: computed(()=>t('Lottery.Rules')),
        link: 'SportsRule',
        sport: false
      },
    ],
    promo: [
      {
        title: computed(()=>t('home.Promotions')),
        link: 'Promotions'
      },
      {
        title: computed(()=>t('home.club')),
        link: 'Vip'
      },
    ],
    help: [
      {
        link: 'Kfc',
        title: computed(()=>t('bottom.KYSPolicy')),
      },
      {
        link: 'Privacy',
        title: computed(()=>t('bottom.Privacy')),
      },
      {
        link: 'Responsible',
        title: computed(()=>t('bottom.Responsible')),
      },
      {
        link: 'TermsSerice',
        title: computed(()=>t('bottom.Terms')),
      },
      {
        link: 'moneyLaundering',
        title: computed(()=>t('home.wash')),
      },
      {
        link: 'SportsRule',
        title: computed(()=>t('Lottery.Rules')),
      },
    ],
  },
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: "100%",
    hiddenTitle: true,
    autoHeight: false
  },
  footerGames: [],
  footerPays: [],
  footerShare: [],
  helpH5TabActive: 0,
});

const {
  activeNames,
  footer,
  dialogConfig,
  footerGames,
  footerPays,
  footerShare,
  helpH5TabActive,
} = toRefs(data);

// 一些不知道什么的配置
const getPlatformConfig = () => {
  homeApi.getPlatformConfig({}).then((response:any)=>{
    if(response.code === 200){
      footerGames.value = response.data.filter((im:any)=>{
        return im.dataType == 1;
      });
      footerPays.value = response.data.filter((im:any)=>{
        return im.dataType == 2;
      });
      footerShare.value = response.data.filter((im:any)=>{
        return im.dataType == 3;
      });
    }
  });
}
getPlatformConfig();

// 游戏跳转
const goGamePage = (link:string) => {
  router.replace({
    name: link
  })
}

// 游戏跳转
const handleSports = (link:string) => {
  router.replace({
    path: "/SportBTI",
    query: {
      url: link,
    },
  });
}

// 帮助中心
const goHelp = (link:string, index?: number) => {
  if(piniaSystem.getIsH5){
    dialogConfig.value.show = true;
    dialogConfig.value.title = t('home.HelpCenter');
    helpH5TabActive.value = index || 0;
  }else{
    router.replace({
      path: '/help',
      query: {
        id: link
      }
    });
  }
}

// 跳转页面
const goPage = (link:string) => {
  router.replace({
    name: link,
  })
}


const goBack = () => {
  dialogConfig.value.show = false;
}

</script>

<style lang="scss">
@import url(./index.scss);
</style>
